<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="请输入主播昵称搜索"
            v-model="alone.searchForm.data.anchorNick"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入主播号搜索"
            v-model="alone.searchForm.data.anchorNo"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="alone.searchForm.data.provideMonth"
            align="right"
            type="month"
            placeholder="选择发放月份"
            format="yyyy-MM"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="alone.searchForm.data.dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="请选择创建开始时间"
            end-placeholder="请选择创建结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <!-- 相关 -->
      <div class="c-aside clearfix">
        <el-button
          class="fr"
          type="primary"
          @click="rShowDrawer('add')"
          v-hasAuth:agent_financeBasePayCreate
        >
          新增保底/底薪</el-button
        >
      </div>
      <div class="clearfix">
        <div class="fl">总共：{{ pageAjax.paging.total }} 条</div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <!-- <el-table-column label="头像">
              <template slot-scope="scope">
                <img class="c-avatar" :src="scope.row.avatarUrl" alt="" />
              </template>
            </el-table-column> -->
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column prop="nickName" label="昵称">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.anchorNick }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="平台">
              <template slot-scope="scope">
                <div class="text-abbreviate">
                  {{ scope.row.intentionPlatform || "无" }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="主播号">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.anchorNo }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="所属运营">
              <template slot-scope="scope">
                <div class="">
                  {{
                    scope.row.operator && scope.row.operator.nickName
                      ? scope.row.operator.departmentName +
                        "-" +
                        scope.row.operator.nickName
                      : "无"
                  }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="保底">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.nickName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="底薪">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.nickName }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="发放月份">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.provideMonth }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备案金额(元)">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.recordAmount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实际发放(元)">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.actualAmount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.remark }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.createTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_financeBasePayDetail
                  @click="rShowDrawer('detail', scope.row.id)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_financebasePayDelete
                  @click="rDeleteBasePay(scope.row.id)"
                  >删除</el-button
                >
                <span
                  v-hasAuth:agent_financeBasePayDetail-agent_financebasePayDelete.invert
                  >—</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-drawer
      size="85%"
      :visible.sync="drawerCp.config.visible"
      :with-header="false"
    >
      <create
        v-show="drawerCp.data.type == 'add'"
        @cancel="rCancelDrawerCp"
        :biPlatformList="biPlatformListSupAjax.data"
      />
      <detail
        ref="detailCp"
        v-show="drawerCp.data.type == 'detail'"
        :id="drawerCp.data.id"
        :biPlatformList="biPlatformListSupAjax.data"
      />
    </el-drawer>
  </div>
</template>
<script>
import { getBiPlatformList } from "@/api/others.js";
import { deleteSalary, getSalaryList } from "@/api/finance.js";

import _ from "lodash";

import create from "./create";
import detail from "./detail";

export default {
  name: "agent_signedList",
  components: { create, detail },
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    drawerCp: {
      config: {
        visible: false
      },
      data: {
        type: "add",
        id: ""
      }
    },
    biPlatformListSupAjax: {
      data: []
    },
    alone: {
      searchForm: {
        loading: false,
        data: {
          anchorNick: "",
          anchorNo: "",
          beginTime: "",
          endTime: "",
          provideMonth: "",
          dateTime: ""
        }
      }
    },
    translate: {
      biPlatformList: {}
    }
  }),
  created() {
    let _that = this;
    _that.getBiPlatformListData().then(() => {
      _that.getPageData();
    });
  },

  methods: {
    rShowDrawer(type, id) {
      this.drawerCp.data.type = type;
      this.drawerCp.data.id = id;
      this.drawerCp.config.visible = true;
      this.$nextTick(() => {
        if (type == "detail") {
          this.$refs.detailCp.getPageData();
        }
      });

      //
    },
    rCancelDrawerCp() {
      let _that = this;
      _that.drawerCp.config.visible = false;
      _that.pageAjax.paging.current =
        _that.pageAjax.paging.current > 0
          ? _that.pageAjax.paging.current - 1
          : 0;
      _that.getPageData();
    },
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      // if (!searchForm.data.searchStr && !searchForm.data.signWish && !searchForm.data.platform) {
      //   _that.$message.error({message: "搜索条件不能都为空", onClose: () => {
      //     _that.alone.searchForm.loading = false;
      //   }});
      //   return;
      // }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    rDeleteBasePay(id) {
      let _that = this;
      this.$confirm("你确定要删除此底薪/保底?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteSalary({ params: { salaryId: id } }).then(resp => {
            let respData = resp.data || {};
            if (respData.code === _that.STATUS.success[0]) {
              _that.$message.success(respData.msg || "绑定成功");
              _that.pageAjax.paging.current =
                _that.pageAjax.paging.current > 0
                  ? _that.pageAjax.paging.current - 1
                  : 0;
              _that.getPageData();
            } else {
              _that.$message.error(respData.msg || "绑定失败");
            }
          });
        })
        .catch(() => {});
    },
    getBiPlatformListData() {
      let _that = this;
      return getBiPlatformList()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let translate = {};
            let arr = respData.data.filter(item => {
              if (item.value != "all") {
                translate[item.value] = item.name;
                return item;
              }
            });
            _that.biPlatformListSupAjax.data = arr;
            _that.translate.biPlatformList = translate;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }
      if (searchForm.data.dateTime) {
        searchForm.data.beginTime = searchForm.data.dateTime[0] || "";
        searchForm.data.endTime = searchForm.data.dateTime[1] || "";
      }
      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      data.pageSize = 10;

      _that.pageAjax.loading = true;
      getSalaryList(data)
        .then(resp => {
          let respData = resp.data || {};
          let respResult = respData.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respResult.list || [];
            if (respResult.pagination) {
              _that.pageAjax.paging = {
                pages: respResult.pagination.pages,
                current: respResult.pagination.current,
                total: respResult.pagination.total,
                pageSize: respResult.pagination.pageSize
              };
            }
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },

    navToDetail(id) {
      this.$router.push({
        name: "agent_detail",
        query: {
          anchorId: id
        }
      });
    },
    navToLiveDetail(id) {
      this.$router.push({
        name: "agent_liveDetail",
        query: {
          anchorId: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
}
</style>
